<template>
    <div>
      <h3>显示房号列表</h3>
      房型
      <select v-model="querydata.typeid">
                        <option value="0">请选择房型</option>
                        <option v-for="a in typedata" :value="a.roomTypeId">{{ a.roomTypeName }}</option>
                    </select>
      门店
       <select v-model="querydata.storeid">
                        <option value="0">请选择门店</option>
                        <option v-for="a in storedata" :value="a.storeId">{{a.storeName }}</option>
                    </select>
      <input type="button" value="查询" class="btn btn-info" @click="queryshow">
      <table class="table">
       <thead>
        <tr>
            <th>编号</th>
            <th>房号</th>
            <th>房型</th>
            <th>门店</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
       </thead>
       <tbody>
        <tr v-for="d in showdata">    
            <td>{{d.houseNumId}}</td>
            <td>{{ d.houseNumName }}</td>
            <td>{{ d.roomTypeName }}</td>
            <td>{{ d.storeName }}</td>
            <td>{{ d.start==1?"上架":"下架" }}</td>
            <td>
                <input type="button" :value="d.start==1?'下架':'上架'" @click="updstart(d.houseNumId)" class="btn btn-success">
                &emsp;
                <input type="button" value="移除" @click="isDel(d.houseNumId)" class="btn btn-info">
            </td>
        </tr>
       </tbody>
      </table>
      <a href="/showall">返回首页</a>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()
onMounted(()=>{
bindtype()
bindstore()
showhouse()
})
//条件查询
   const queryshow=()=>{
    showhouse()
   }
//查询条件
   const querydata=ref({
    typeid:0,
    storeid:0
   })
   const showdata=ref([{
       "houseNumId": 1,
    "houseNumName": "101",
    "typdId": 1,
    "storeSId": 1,
    "start": 1,
    "roomTypeName": "单人房",
    "storeName": "安平大酒店"
   }])
   //显示房号
const showhouse=()=>{
    axios.get('/api/HouseNum/ShowHouse',{params:querydata.value}).then(res=>{
        showdata.value=res.data
    })
}

//修改状态
const updstart=(uid:number)=>{
   if(!confirm('确定修改上|下架状态???'))
   {
    return;
   }
   axios.get('/api/HouseNum/UpdStart',{params:{id:uid}}).then(res=>{
            if(res.data>0)
     {
        alert('状态修改成功!!')
        showhouse()
     }
    else
    {
        alert('状态修改失败!!')
        return;
    }
        })
}
//移除
const isDel=(did:number)=>{
      if(!confirm('确定移除么???'))
   {
    return;
   }
   axios.delete('/api/HouseNum/IsDel',{params:{id:did}}).then(res=>{
            if(res.data>0)
     {
        alert('移除成功!!')
        showhouse()
     }
    else
    {
        alert('移除失败!!')
        return;
    }
        })
}


//绑定房型下拉框
const  typedata=ref([{
     "roomTypeId": 1,
    "roomTypeName": "单人房"
}])
const bindtype=()=>{
    axios.get('/api/RoomType/GetRoomType',{}).then(res=>{
        typedata.value=res.data
    })
}
//绑定门店
const  storedata=ref([{
     "storeId": 1,
    "storeName": "安平大酒店",
}])
const bindstore=()=>{
    axios.get('/api/Store/GetAllStores',{}).then(res=>{
        storedata.value=res.data
    })
}
</script>

<style scoped>

</style>